<html>
	<head>
		<meta charset="utf-8">
		<title>Firego+HTML5+WebSocket  Webim</title>
		<link rel="stylesheet" type="text/css" href="css/main.css" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
		<meta name="apple-mobile-web-app-capable" content="YES">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
 >
		<meta name="title" content="Firego-webim!" />
		<meta name="description" content="Firego + HTML5+WebSocket  Webim" />
		<link rel="image_src" href="images/fb-image.jpg" />
        <link rel="stylesheet" href="./layui/css/layui.css">
	</head>
	<body>
		<canvas id="canvas"></canvas>

		<div id="ui">
			<div id="fps"></div>
		
			<input id="chat" type="text" />
			<div id="chatText"></div>
			<h1>Firego</h1>

			<div id="instructions">

			</div>
			<aside id="info">
			<section id="share">
				       <a rel="external" href="http://github.com/walkor/Mmorpg-todpole" title="Mmorpg-todpole at GitHub">源代码：<img src="css/images/github.png" alt="fork on github"></a>
				       &nbsp;&nbsp;
			</section>
			<section id="wtf">
			
			    <!-- 尊重他人劳动成果，请保留原作者相关链接 -->
				<h2>powered&nbsp;by&nbsp;<a rel="external" href="http://Mmorpg.net/Mmorpg-todpole" target="_blank">Firego</a> &nbsp;&nbsp;&nbsp;&nbsp;感谢 <a href="http://layui.com/" target="_blank">layui</a></h2>
				<!-- 尊重他人劳动成果，请保留原作者相关链接 -->
				
			</section>
			</aside>

            <aside id="frogMode">
                <h3>Frog Mode</h3>
                <section id="tadpoles">
                    <h4>Tadpoles</h4>
                    <ul id="tadpoleList">
                    </ul>
                </section>
                <section id="console">
                    <h4>Console</h4>
                </section>
            </aside>
		
			<div id="cant-connect">
				与服务器断开连接了。您可以重新刷新页面。
			</div>
			<div id="unsupported-browser">
				<p>
					您的浏览器不支持 <a rel="external" href="http://en.wikipedia.org/wiki/WebSocket">WebSockets</a>.
					推荐您使用以下浏览器
				</p>
				<ul>										
					<li><a rel="external" href="http://www.google.com/chrome">Google Chrome</a></li>
					<li><a rel="external" href="http://apple.com/safari">Safari 4</a></li>
					<li><a rel="external" href="http://www.mozilla.com/firefox/">Firefox 4</a></li>
					<li><a rel="external" href="http://www.opera.com/">Opera 11</a></li>
				</ul>
				<p>
					<a href="#" id="force-init-button">仍然浏览!</a>
				</p>
			</div>
			
		</div>

		<script src="js/lib/parseUri.js"></script> 
		<script src="js/lib/modernizr-1.5.min.js"></script>

		<script src="js/jquery.min.js"></script>
		<script src="js/Cookie.js"></script>
		<script src="layui/layui.js"></script>
		<script src="js/WebSocketService.js?t="></script>
		<script src="js/App.js"></script>
		<script src="js/main.js"></script>


		<script id="login_tpl" type="text/plain">

            <div  class="layui-layer-content">
                <div class="layim-add-box">


                    <div class="layim-add-remark">

                        <div class="layui-form-item">
                            <label class="layui-form-label">用户名</label>
                            <div class="layui-input-block">
                                <input type="input" name="user"  value="simarui2" id="user" autocomplete="off" class="layui-input">
                            </div>

                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">密码</label>
                            <div class="layui-input-block">
                                <input type="password" name="pwd" value="121" id="pwd" lay-verify="pass" placeholder="" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
             </div>
            </div>

        </script>

		<script id="reg_tpl" type="text/plain">

            <div  class="layui-layer-content">
                <div class="layim-add-box">
                    <div class="layim-add-img" onclick="show_header()"  style="cursor: pointer">
                        <img class="layui-circle" id="avatar_show" src="avatar/twenty-percent-cooler-octocat.png">
                        <p>选择头像</p>
                        <input type="hidden" name="avatar" id="avatar" value="avatar/twenty-percent-cooler-octocat.png">
                    </div>

                    <div class="layim-add-remark">

                        <div class="layui-form-item">
                            <label class="layui-form-label">用户名</label>
                            <div class="layui-input-block">
                                <input type="input" name="user"  id="user" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">密码</label>
                            <div class="layui-input-block">
                                <input type="password" id="pwd" name="pwd" lay-verify="pass" placeholder="" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                         <div class="layui-form-item">
                            <label class="layui-form-label">昵称</label>
                            <div class="layui-input-block">
                                <input type="input" name="nick"  id="nick" autocomplete="off" class="layui-input">
                            </div>
                        </div>


                    </div>
                </div>
            </div>

        </script>

		<style>

			#recomFace {
				padding: 20px;
				padding-right: 0px
			}

			#recomFace li {
				float: left;
				padding: 0 10px 10px 0;
				width: 80px;
				height: 80px;
				cursor: pointer;
			}
			#recomFace li img {
				padding:5px;
				width: 80px;
				height: 80px;
			}
			.clearfix:after {
				content: ".";
				display: block;
				height: 0;
				clear: both;
				visibility: hidden;
				zoom: 1;
			}
			.clearfix li {
				list-style: none;
				list-style-position: outside;
				list-style-type: none;
			}

		</style>

		<script type="text/plain" id="header_tpl" >

			<ul class="clearfix" id="recomFace"  >
					<li data="avatar/collabocats.jpg"><img src="avatar/collabocats.jpg" alt=""></li>
					<li data="avatar/dojocat.jpg"><img src="avatar/dojocat.jpg" alt=""></li>
					<li data="avatar/femalecodertocat.png"><img src="avatar/femalecodertocat.png" alt=""></li>
					<li data="avatar/goretocat.png"><img src="avatar/goretocat.png" alt=""></li>
					<li data="avatar/hubot.jpg"><img src="avatar/hubot.jpg" alt=""></li>
					<li data="avatar/minertocat.png"><img src="avatar/minertocat.png" alt=""></li>
					<li data="avatar/mountietocat.png"><img src="avatar/mountietocat.png" alt=""></li>
					<li data="avatar/notocat.jpg"><img src="avatar/notocat.jpg" alt=""></li>
					<li data="avatar/octocat-de-los-muertos.jpg"><img src="avatar/octocat-de-los-muertos.jpg" alt=""></li>
					<li data="avatar/privateinvestocat.jpg"><img src="avatar/privateinvestocat.jpg" alt=""></li>
					<li data="avatar/supportcat.png"><img src="avatar/supportcat.png" alt=""></li>
					<li data="avatar/twenty-percent-cooler-octocat.png"><img src="avatar/twenty-percent-cooler-octocat.png" alt=""></li>
			</ul>
		</script>



		<script>

            var GlobalSid   = ""
            var GlobalId    = ""
			var GlobalToken = ""
            var GlobalMine       = null;
            var GlobalContacts  = null;
			var GlobalGroups    = null;

            $(document).ready(function(){
				show_login();
			});

			function show_login(){

                layui.use('layer', function(){
                    var layer = layui.layer;

                    content = $('#login_tpl').html()
                    //示范一个公告层
                    layer.open({
                        type: 1
                        ,title: "登录" //不显示标题栏
                        ,closeBtn: false
                        ,area: '460px;'
                        // ,shade: 0.8
                        ,id: 'lay_login' //设定一个id，防止重复弹出
                        ,btn: [ '登录','注册']
                        ,moveType: 0 //拖拽模式，0或者1
                        ,content: content
                        ,yes: function( index, layero ){
                            user = $('#user').val()
                            pwd  = $('#pwd').val()
                            $.post("/login",{user:user,pwd:pwd},function(json){
                                //json = JSON.parse( result )
                                if (json.code==1) {
                                    GlobalId = json.data.id;
                                    GlobalSid = json.data.sid;
									GlobalToken = json.data.token;
                                    GlobalContacts = json.contacts;
                                    GlobalGroups = json.groups;
                                    GlobalMine = json.data
                                    layer.closeAll();
									startWs( GlobalSid );
                                    init();
                                }
                                layer.msg(json.msg);
                            });
                        }
                        ,btn2: function(){
                            layer.close();
                            show_reg()
                        }
                        ,success: function(layero){
							$(document).on('keydown', function(e){
								if(e.keyCode == 13){
									var btn = layero.find('.layui-layer-btn');
									btn.find('.layui-layer-btn0').click()
								}
							})
						}
                    });
				    $('#user').focus();

                });
			}

            // 弹出注册层
			function show_reg(){
                layui.use('layer', function() {
                    content = $('#reg_tpl').html()
                    var layer = layui.layer;

                    layer.open({
                        type: 1
                        , title: "注册" //不显示标题栏
                        , closeBtn: false
                        , area: '460px;'
                        // ,shade: 0.8
                        , id: 'lay_reg' //设定一个id，防止重复弹出
                        , btn: ['确定', '返回']
                        , moveType: 1 //拖拽模式，0或者1
                        , content: content
                        , yes: function () {
                            user = $('#user').val()
                            pwd = $('#pwd').val()
                            nick = $('#nick').val()
                            avatar = $('#avatar').val()
                            $.post("/reg", {user: user, pwd: pwd, nick: nick,avatar:avatar}, function (json) {
                                // alert( result )
                                // json = JSON.parse(result)
                                if (json.code == 1) {
                                    layer.close();
                                }
                                layer.msg(json.msg)
                            });
                        }
                        , btn2: function () {
                            layer.close();
                            show_login()
                        }
                        ,success: function(layero){
                            $(document).on('keydown', function(e){
                                if(e.keyCode == 13){
                                    var btn = layero.find('.layui-layer-btn');
                                    btn.find('.layui-layer-btn0').click()
                                }
                                if(e.keyCode == 27){
                                    var btn = layero.find('.layui-layer-btn');
                                    btn.find('.layui-layer-btn1').click()
                                }
                            })
                        }
                    });
                });
			}

            // 弹出头像选择层
			function show_header(){
                layui.use('layer', function() {
                    content = $('#header_tpl').html()
                    var layer = layui.layer;
                    var choose_pic = ""

                    layer.open({
                        type: 1
                        , title: "请选择头像"
                        , closeBtn: false
                        , area: '576px;'
                        , id: 'lay_header' //设定一个id，防止重复弹出
                        , btn: ['确定', '返回']
                        , moveType: 0 //拖拽模式，0或者1
                        , content: content
                        , success: function () {
                            $("#recomFace li").click(function () {

                                $('#recomFace li').each(function (i) {
                                    $(this).css('background-color', '');
                                });
                                $(this).css('background-color', 'lightblue');
                                choose_pic = $(this).attr('data')

                            });
                        }
                        , yes: function () {
                            layui.layer.close();
                            if (choose_pic != "") {
                                $('#avatar').val(choose_pic)
                                $('#avatar_show').attr('src',choose_pic)
                            }
                           // $('.layui-layer-btn1').click();
                            console.log( $('#lay_header').next().next().children("a.layui-layer-btn1") )
                            $('#lay_header').next().next().children("a.layui-layer-btn1").click();

                        }
                        , btn2: function () {
                            layer.close();
                        }
                    });
                });
			}


			//演示自动回复
			var autoReplay = [
				'您好，我现在有事不在，一会再和您联系。',
				'你没发错吧？face[微笑] ',
				'洗澡中，请勿打扰，偷窥请购票，个体四十，团体八折，订票电话：一般人我不告诉他！face[哈哈] ',
				'你好，我是主人的美女秘书，有什么事就跟我说吧，等他回来我会转告他的。face[心] face[心] face[心] ',
				'face[威武] face[威武] face[威武] face[威武] ',
				'<（@￣︶￣@）>',
				'你要和我说话？你真的要和我说话？你确定自己想说吗？你一定非说不可吗？那你说吧，这是自动回复。',
				'face[黑线]  你慢慢说，别急……',
				'(*^__^*) face[嘻嘻] ，是贤心吗？'
			];
			function init(){
                layui.use('layim', function( ) {

                    var layim = layui.layim;


                    //基础配置
                    layim.config({

                        //初始化接口
                        init: {
                            url: '/get_list?sid='+GlobalSid+"&id="+GlobalId
                            , data: {
							}
                        }

                        //查看群员接口
                        , members: {
                            url: '/get_member'
                            , data: {}
                        }

                        //上传图片接口
                        , uploadImage: {
                            url: '/upload_image' //（返回的数据格式见下文）
                            , type: '' //默认post
                        }

                        //上传文件接口
                        , uploadFile: {
                            url: '/upload_file' //（返回的数据格式见下文）
                            , type: '' //默认post
                        }

                        //扩展工具栏
                        , tool: [{
                            alias: 'code'
                            , title: '代码'
                            , icon: '&#xe64e;'
                        }]

                        //,brief: true //是否简约模式（若开启则不显示主面板）

                        //,title: 'WebIM' //自定义主面板最小化时的标题
                        //,right: '100px' //主面板相对浏览器右侧距离
                        //,minRight: '90px' //聊天面板最小化时相对浏览器右侧距离
                        , initSkin: '5.jpg' //1-5 设置初始背景
                        //,skin: ['aaa.jpg'] //新增皮肤
                        //,isfriend: false //是否开启好友
                        //,isgroup: false //是否开启群组
                        //,min: true //是否始终最小化主面板，默认false
                        , notice: true //是否开启桌面消息提醒，默认false
                        //,voice: false //声音提醒，默认开启，声音文件为：default.wav

                        , msgbox: layui.cache.dir + 'css/modules/layim/html/msgbox.html' //消息盒子页面地址，若不开启，剔除该项即可
                        , find: layui.cache.dir + 'css/modules/layim/html/find.html' //发现页面地址，若不开启，剔除该项即可
                        , chatLog: layui.cache.dir + 'css/modules/layim/html/chatLog.html' //聊天记录页面地址，若不开启，剔除该项即可

                    });
                });
			}

			layui.use('layim', function(layim){

				//监听在线状态的切换事件
				layim.on('online', function(data){
					console.log(data);

				});

				//监听签名修改
				layim.on('sign', function(value){
					//console.log(value);
				});

				//监听自定义工具栏点击，以添加代码为例
				layim.on('tool(code)', function(insert){
					layer.prompt({
						title: '插入代码'
						,formType: 2
						,shade: 0
					}, function(text, index){
						layer.close(index);
						insert('[pre class=layui-code]' + text + '[/pre]'); //将内容插入到编辑器
					});
				});

				//监听layim建立就绪
				layim.on('ready', function(res){

					//console.log(res.mine);

					//layim.msgbox(5); //模拟消息盒子有新消息，实际使用时，一般是动态获得

					//添加好友（如果检测到该socket）
                    /*
					layim.addList({
						type: 'group'
						,avatar: "http://tva3.sinaimg.cn/crop.64.106.361.361.50/7181dbb3jw8evfbtem8edj20ci0dpq3a.jpg"
						,groupname: 'Angular开发'
						,id: "12333333"
						,members: 0
					});
					*/
				});

				//监听发送消息
				layim.on('sendMessage', function(data){
					var To = data.to;
                    var Mine = data.mine;
					console.log(data);
                    Mine.mine = false;
					if(To.type === 'friend'){
                        app.pushMessage( GlobalSid, Mine, data.to.sid,  data.mine.content  )
					}else{
						app.pushGroupMessage( GlobalSid, Mine, data.to.channel_id,   data.mine.content)
					}
				});

				//监听查看群员
				layim.on('members', function(data){
					 console.log(data);
				});

				//监听聊天窗口的切换
				layim.on('chatChange', function(res){
					var type = res.data.type;
					console.log(res.data.id)
					if(type === 'friend'){
						//模拟标注好友状态
						//layim.setChatStatus('<span style="color:#FF5722;">在线</span>');
					} else if(type === 'group'){
						//模拟系统消息
						return
						layim.getMessage({
							system: true
							,id: res.data.id
							,type: "group"
							,content: '模拟群员'+(Math.random()*100|0) + '加入群聊'
						});
					}
				});

			});
		</script>
	</body>
</html>
